<template>
  <view class="category">
    <!-- 搜索框 -->
    <search></search>
    <!-- 分类布局 -->
    <view class="content">
      <view class="left">
        <!-- 这里循环的是左边的title数组  因为这个数组返回的数据就是本身带的大标题再带children key值可以直接等于本身-->
        <!-- 三元表达式动态给选中的标题挂载样式 -->
        <!-- class="contentIndex" -->
        <view
          :class="contentIndex === index ? 'title-item active' : 'title-item'"
          @click="handlerMenuSelect(index)"
          v-for="(item, index) in titles"
          :key="item"
        >
          {{ item }}
        </view>
      </view>
      <!-- 出现的小bug，就是右边的商品列表拉到底部，左边的标题切换但是右边的商品列表还是停留在底部不会到顶部 -->
      <!-- 开启滚动视图容器，而开启后要开启scroll-y纵向滚动 -->
      <scroll-view class="right" scroll-y :scroll-top="scrollTop">
        <!-- 这里遍历的是整个大数组的子数组，是二级数组的标题数组 -->
        <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
          <view class="goods-title">/ {{ item1.cat_name }} /</view>
          <view class="goods-list">
            <!-- 而这里遍历的是二级数组里面的子数组，是右边的商品标题下的商品数据 -->
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?id=' + item2.cat_id"
            >
              <image :src="item2.cat_icon" mode="widthFix"> </image>
              <view class="goods-subtitle">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
// 定义一个全局数组，不像在data定义的那样，在data里定义了就一定在视图中使用，
/**
 * 把数据放到data中，两个目的才这么做，
 * 1 这个变量肯定也是全局变量
 * 2 如果我们要把这个数据放到data中，要保证这个数据一定是在视图中使用
 * 3 小程序中 建议 data中的数据 越少越好， 越少性能越强
 * */
let categories = [];
export default {
  data() {
    return {
      // 左侧的标题数组
      titles: [],
      // 右侧的商品数组
      goods: [],
      // 选中的左边标题
      contentIndex: 0,
      // 右边商品的滚动高度
      scrollTop: 0,
    };
  },
  async onLoad() {
    // 存储数据到本地存储中有两种情况：【1】 没有数据，发请求获取数据渲染数据，再存到本地存储中 【2】有数据，判断数据有没有过期，如果没有过期，则发请求获取数据，存到本地存储中，如果过期了，重新发请求获取数据，存到本地存储中
    // 微信小程序本地存储方式：：
    // wx.setStorageSync("category", { msg: "大胆，曹贼" });
    let storageCategory = uni.getStorageSync("category");
    if (storageCategory) {
      console.log("存在");
      // 如果过期了，那么就是重新发请求获取数据
      if (Date.now() - storageCategory.time > 1000 * 30) {
        console.log("过期了");
        this.getStorageCategory();
      } else {
        // 这个就是数据直接从本地存储中直接获取，而不用再发一次请求
        console.log("没过期，可以直接使用");
        categories = storageCategory.data;
        // console.log(17, categories);
        // 把titles数组进行解析，并且把v.cat_name返回到数组里，上面就可以直接遍历
        this.titles = categories.map((v) => v.cat_name);
        // 这个就是直接解析数组里的第一个元素的子元素数组，
        this.goods = categories[0].children;
      }
    } else {
      console.log("不存在");
      this.getStorageCategory();
    }
    // // 正常发送请求方式
    // const res = await this.$u.get("/categories");
    // categories = res.message;
    // // console.log(17, categories);
    // // 把titles数组进行解析，并且把v.cat_name返回到数组里，上面就可以直接遍历
    // this.titles = categories.map((v) => v.cat_name);
    // // 这个就是直接解析数组里的第一个元素的子元素数组，
    // this.goods = categories[0].children;
    // console.log(38, this.goods);
  },
  methods: {
    async getStorageCategory() {
      // 正常发送请求方式
      const res = await this.$u.get("/categories");
      categories = res.message;
      // console.log(17, categories);
      // 把titles数组进行解析，并且把v.cat_name返回到数组里，上面就可以直接遍历
      this.titles = categories.map((v) => v.cat_name);
      // 这个就是直接解析数组里的第一个元素的子元素数组，
      this.goods = categories[0].children;
      // 把数据存到本地缓存中
      uni.setStorageSync("category", { time: Date.now(), data: res.message });
    },
    handlerMenuSelect(index) {
      // 绑定选中的标题的下标
      this.contentIndex = index;
      // 解析原数组的子元素数组的下标
      this.goods = categories[index].children;
      // 重新定义滚动条的高度,但是这里要注意，当重复设置某些属性为相同的值时，不会同步到view层。例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。
      this.scrollTop =
        Math.random() * Math.random() * Math.random() * Math.random();
    },
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  // 正常溢出就开启滚动条，分配flex布局
  flex: 1;
  overflow: hidden;
  display: flex;
  .left {
    padding-top: 30rpx;
    margin-left: 20rpx;
    width: 180rpx;
    overflow: auto;
    .title-item {
      height: 80rpx;
      font-size: 28rpx;
      flex-direction: column;
      justify-content: center;
      // 单行子盒子在侧轴上的对齐方式  前面 u-flex 就是已经封装好这个属性还有主轴方向，还有子盒子主轴方向上的对齐方式
      align-items: center;
    }
    .active {
      color: #ea4350;
      position: relative;
      &::before {
        // 添加的是最左边的那条竖杆的样式
        content: "";
        width: 5rpx;
        height: 80%;
        background-color: #ea4350;
        left: -3rpx;
        top: 20%;
        // Y轴上的旋转
        transform: translateY(-50%);
        position: absolute;
      }
    }
  }
  .right {
    flex: 1;
    overflow: auto;
    .goods-group {
      .goods-title {
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
      }
      .goods-list {
        display: flex;
        flex-wrap: wrap;
        // navigator是超链接便签，，，不用点。。。。。
        navigator {
          width: 33.33%;
          text-align: center;
          image {
            width: 60%;
          }
          .goods-subtitle {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>